<template>
  <div>
    <!-- <div class="top">
      <div class="top-text">
        <span class="top-iconl"
              @click="jump">
          <font-awesome-icon icon="chevron-left" />
        </span>
        我的订单
        <span class="top-iconr">
          <font-awesome-icon icon="search" />
        </span>
      </div>
    </div> -->
    <van-nav-bar title="我的订单"
                 left-text=""
                 left-arrow
                 @click-left="jump">
      <van-icon name="search"
                slot="right" />
    </van-nav-bar>
    <div class="mid">
      <el-tabs v-model="activeName">
        <el-tab-pane label="全部"
                     name="first">
          <div class="bottom">
            <div class="order-pic">
              <img v-bind:src="require('../../assets/images/MineImages/shopbag.jpg')"
                   class="order-pic">
            </div>
            <div class="order-text">
              啊哦~你还没有相关的订单
            </div>
            <div class="order-text">
              可以去看看有没有哪些想买的
            </div>
            <div class="order-button">
              <el-button type="primary"
                         round>去逛逛</el-button>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="待付款"
                     name="second">
          <div class="bottom">
            <div class="order-pic">
              <img v-bind:src="require('../../assets/images/MineImages/shopbag.jpg')"
                   class="order-pic">
            </div>
            <div class="order-text">
              啊哦~你还没有相关的订单
            </div>
            <div class="order-text">
              可以去看看有没有哪些想买的
            </div>
            <div class="order-button">
              <el-button type="primary"
                         round>去逛逛</el-button>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="待处理"
                     name="third">
          <div class="bottom">
            <div class="order-pic">
              <img v-bind:src="require('../../assets/images/MineImages/shopbag.jpg')"
                   class="order-pic">
            </div>
            <div class="order-text">
              啊哦~你还没有相关的订单
            </div>
            <div class="order-text">
              可以去看看有没有哪些想买的
            </div>
            <div class="order-button">
              <el-button type="primary"
                         round>去逛逛</el-button>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="处理中"
                     name="fourth">
          <div class="bottom">
            <div class="order-pic">
              <img v-bind:src="require('../../assets/images/MineImages/shopbag.jpg')"
                   class="order-pic">
            </div>
            <div class="order-text">
              啊哦~你还没有相关的订单
            </div>
            <div class="order-text">
              可以去看看有没有哪些想买的
            </div>
            <div class="order-button">
              <el-button type="primary"
                         round>去逛逛</el-button>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="待评价"
                     name="fifth">
          <div class="bottom">
            <div class="order-pic">
              <img v-bind:src="require('../../assets/images/MineImages/shopbag.jpg')"
                   class="order-pic">
            </div>
            <div class="order-text">
              啊哦~你还没有相关的订单
            </div>
            <div class="order-text">
              可以去看看有没有哪些想买的
            </div>
            <div class="order-button">
              <el-button type="primary"
                         round>去逛逛</el-button>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="售后记录"
                     name="sixth">
          <div class="bottom">
            <div class="order-pic">
              <img v-bind:src="require('../../assets/images/MineImages/shopbag.jpg')"
                   class="order-pic">
            </div>
            <div class="order-text">
              啊哦~你还没有相关的订单
            </div>
            <div class="order-text">
              可以去看看有没有哪些想买的
            </div>
            <div class="order-button">
              <el-button type="primary"
                         round>去逛逛</el-button>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Myorder',
  data () {
    return {
      activeName: 'first'
    }
  },
  methods: {
    jump () {
      this.$router.push({ path: '/Mine' })
    }
  }
}
</script>

<style scoped>
.top {
  margin-top: 20px;
}
.top-iconl {
  float: left;
  position: relative;
  left: 25px;
}
.top-iconr {
  float: right;
  position: relative;
  right: 25px;
}
.top-text {
  text-align: center;
}
.mid {
  padding: 25px;
}
.bottom {
  position: relative;
  margin-top: 50%;
}
.order-text {
  text-align: center;
  font-size: 0.9rem;
  color: rgba(128, 128, 128, 0.445);
}
.order-button {
  text-align: center;
  margin-top: 20px;
}
.order-pic {
  width: 100px;
  height: 100px;
  margin: 0 auto;
}
.van-nav-bar {
  background-color: rgb(114, 202, 205);
}
::v-deep .van-icon,
::v-deep .van-nav-bar__text,
::v-deep .van-ellipsis {
  color: #fff;
}
::v-deep .is-round {
  background-color: rgb(114, 202, 205);
  border: none;
}
</style>
